import {
  createContext,
  useState,
  ReactNode,
  useContext,
  Dispatch,
  SetStateAction,
} from "react";

type Color = "red" | "blue";

interface ColoContextState {
  color: Color;
  setColor: Dispatch<SetStateAction<Color>>;
}

const ColoContext = createContext<ColoContextState>({
  color: "blue",
  setColor: () => {},
});

export const BColoContext = ({ children }: { children: ReactNode }) => {
  const [color, setColor] = useState<Color>("blue");

  return (
    <ColoContext.Provider value={{ color, setColor }}>
      {children}
    </ColoContext.Provider>
  );
};

export const useColoContext = () => {
  return useContext(ColoContext);
};
